<template>
    <!-- 搜索条件 -->
    <div class="user-select">
        <el-form label-width="120px">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="设备信息">
                        <el-select v-model="form.did" filterable placeholder="请选择设备信息" clearable>
                            <el-option
                                v-for="item in account_list"
                                :key="item.id"
                                :label="item.name + ' - ' + item.id"
                                :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="日志类型">
                        <el-select v-model="types_info" filterable placeholder="请选择日志类型" clearable>
                            <el-option label="pipe 通道日志" value="pipe"/>
                            <el-option label="app 程序运行日志" value="app"/>
                            <el-option label="runtime 函数耗时日志" value="runtime"/>
                            <el-option label="quest 外部请求日志" value="quest"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="所属应用">
                        <el-select v-model="form.args" filterable placeholder="请选择所属应用" clearable>
                            <el-option
                                v-for="(item,index) in app_lists"
                                :key="index"
                                :label="item"
                                :value="item"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5" v-if="form.type == 'app'">
                    <el-form-item label="日志级别">
                        <el-select v-model="form.level" filterable placeholder="请选择日志级别" clearable>
                            <el-option
                                v-for="(item,index) in log_level_list"
                                :key="index"
                                :label="item"
                                :value="item"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
export default{
    data(){
        return {
            types_info:"pipe",
            form:{
                type:"pipe",
            },
            account_list:[],
            log_level_list:[],
            app_lists:[],
            cache:{},
        }
    },
    watch:{
        types_info(){
            this.form.type = this.types_info
            this.appGet()
        },
    },
    // 页面挂载完成后触发的事件
    mounted(){
        this.initData()
    },
    methods:{
        // 获取数据函数
        initData(){
            var that = this
            that.account_list = []
            that.types = null
            that.$axios.get('api:dervice.list').then(res=>{
                that.account_list = res.data
            })
            // 获取日志级别
            that.$axios.get('api:log.app.level').then(res=>{
                that.log_level_list = res.data
            })
            that.appGet()
        },
        // 获取对应类型的日志列表
        appGet(){
            var that = this
            that.form.args = ""
            that.app_lists = []
            if(that.cache[that.form.type]){
                that.app_lists = that.cache[that.form.type]
                return
            }
            that.$axios.get("api:log."+that.form.type+".args").then(res=>{
                that.cache[that.form.type] = res.data
                that.app_lists = res.data
            })
        },
        // 搜索事件
        onSubmit(){
            this.$emit("search",JSON.parse(JSON.stringify(this.form)))
        },
    },
}
</script>